<div>
  <button (click)="handleClickAdd()">添加</button>
</div>
<div>
  <p-table [value]="list" [tableStyle]="{ 'min-width': '50rem' }">
    <ng-template pTemplate="header">
      <tr>
        <th>Description</th>
        <th>Name</th>
        <th>Region</th>
        <th>DateTime</th>
        <th>操作</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-item>
      <tr>
        <td>{{ item.description }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.region }}</td>
        <td>{{ item.dateTime }}</td>
        <td>
          <button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="handleClickUpdate(item)">修改</button>
          <button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="handleClickDelete(item)">删除</button>
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>

<p-dialog [(visible)]="isShowEdit" [style]="{ width: '450px' }" header="Details" [modal]="true" styleClass="p-fluid">
  <ng-template pTemplate="content">
    <div class="field">
      <label for="description">描述（需要唯一）</label>
      <input class="p-inputtext-sm" type="text" pInputText id="description" [(ngModel)]="row.description" required autofocus />
    </div>
    <div class="field">
      <label for="name">演唱名称必填，其他可以非必填（按预约默认需要清空）</label>
      <input class="p-inputtext-sm" type="text" pInputText id="name" [(ngModel)]="row.name" required autofocus />
    </div>
    <div class="field">
      <label for="region">地区</label>
      <input class="p-inputtext-sm" type="text" pInputText id="region" [(ngModel)]="row.region" required autofocus />
    </div>
    <div class="field">
      <label for="dateTime">票档</label>
      <input class="p-inputtext-sm" type="text" pInputText id="dateTime" [(ngModel)]="row.dateTime" required autofocus />
    </div>
    <div class="field">
      <label for="ticket">票数</label>
      <input class="p-inputtext-sm" type="text" pInputText id="ticket" [(ngModel)]="row.ticket" required autofocus />
    </div>
    <div class="field">
      <label for="price">价格</label>
      <input class="p-inputtext-sm" type="text" pInputText id="price" [(ngModel)]="row.price" required autofocus />
    </div>
    <div class="field">
      <label for="user">观看人</label>
      <input class="p-inputtext-sm" type="text" pInputText id="user" [(ngModel)]="row.user" required autofocus />
    </div>
    <div class="field">
      <label for="pay">支付方式</label>
      <input class="p-inputtext-sm" type="text" pInputText id="pay" [(ngModel)]="row.pay" required autofocus />
    </div>
    <div class="field">
      <label for="doOrder">是否下单</label>
      <input class="p-inputtext-sm" type="text" pInputText id="doOrder" [(ngModel)]="row.doOrder" required autofocus />
    </div>
    <div class="field">
      <label for="execTime">第一次执行时间</label>
      <input class="p-inputtext-sm" type="text" pInputText id="execTime" [(ngModel)]="row.execTime" required autofocus />
    </div>
  </ng-template>
  <ng-template pTemplate="footer">
    <button pButton pRipple label="取消" icon="pi pi-times" class="p-button-text" (click)="isShowEdit = !isShowEdit"></button>
    <button pButton pRipple label="保存" icon="pi pi-check" class="p-button-text" (click)="handleClickSave()"></button>
  </ng-template>
</p-dialog>

<p-toast></p-toast>
